<!-- src/components/Notification.vue -->
<template>
    <transition name="notification-fade">
        <div v-if="visible" class="notification" :style="{ backgroundColor: backgroundColor, color: textColor }">
            {{ message }}
        </div>
    </transition>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useDanmuStore } from '../../stores/danmu/danmu';

const store = useDanmuStore();
const message = ref('');
const backgroundColor = ref('#333');
const textColor = ref('#fff');
const visible = ref(false);

watch(() => store.message, (newMsg) => {
    if (newMsg) {
        message.value = newMsg;
        backgroundColor.value = store.backgroundColor;
        textColor.value = store.textColor;
        visible.value = true;
        setTimeout(() => {
            visible.value = false;
        }, 1000); // 3秒后自动隐藏
    }
});
</script>

<style scoped>
.notification {
    position: fixed;
    bottom: 50px;
    left: 0px;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.notification-fade-enter-active,
.notification-fade-leave-active {
    transition: opacity 0.5s;
}

.notification-fade-enter,
.notification-fade-leave-to {
    opacity: 0;
}
</style>
